<template>
	<view class="container">
		<tui-list-cell arrow padding="30rpx" unlined @click="moreQuestion">
			<view class="thorui-flex__between">
				<view class="thorui-align__center">
					<image class="tui-img" :src="webURL + 'common_img_3x.png'"></image>
					<text class="tui-title">常见问题</text>
				</view>
				<view class="tui-sub__text">更多问题</view>
			</view>
		</tui-list-cell>
		<tui-list-cell padding="10rpx 29rpx 30rpx" :hover="false">
			<view class="tui-question__box thorui-flex__between">
				<view class="tui-question__item thorui-flex__center" @tap="getAnswer(1)">如何引入到自己项目中使用？</view>
				<view class="tui-question__item thorui-flex__center" @tap="getAnswer(2)">ThorUI可以商用吗？</view>
				<view class="tui-question__item thorui-flex__center" @tap="getAnswer(3)">会员是永久的吗？</view>
				<view class="tui-question__item thorui-flex__center" @tap="getAnswer(4)">有交流群吗？</view>
			</view>
		</tui-list-cell>
		<tui-list-cell arrow padding="30rpx" @click="online">
			<view class="thorui-flex__between">
				<button class="tui-btn__opentype" open-type="contact"></button>
				<view class="thorui-align__center">
					<image class="tui-img" :src="webURL + 'wechat_img_3x.png'"></image>
					<text class="tui-title">在线咨询</text>
				</view>
				<view class="tui-sub__text">自己努力过仍未解决</view>
			</view>
		</tui-list-cell>
		<tui-list-cell arrow padding="30rpx" @click="call">
			<view class="thorui-flex__between">
				<view class="thorui-align__center">
					<image class="tui-img" :src="webURL + 'number_img_3x.png'"></image>
					<text class="tui-title">电话热线</text>
				</view>
				<view class="tui-sub__text">13:00-18:00</view>
			</view>
		</tui-list-cell>
		<tui-bottom-popup :show="show" @close="close">
			<view style="min-height: 720rpx;">
				<tui-list-cell :hover="false" padding="0" :lineLeft="false">
					<view class="tui-common tui-answer__title thorui-flex__between">
						<view>常见问题</view>
						<tui-icon name="shut" :size="22" @click="close"></tui-icon>
					</view>
				</tui-list-cell>
				<view class="tui-common">{{ question }}</view>
				<view class="tui-answer__text" v-for="(item, index) in answer" :key="index">{{ item }}</view>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			webURL: 'https://www.thorui.cn/extend/help/',
			show: false,
			question: '',
			answer: []
		};
	},
	methods: {
		moreQuestion() {
			this.tui.toast('暂无更多问题');
		},
		call() {
			this.tui.toast('暂不提供该服务');
		},
		online() {
			// #ifndef MP
			this.tui.toast('请去小程序端或添加QQ3039218619进行咨询', 3000);
			// #endif
		},
		close() {
			this.show = false;
		},
		getAnswer(index) {
			let answer = [];
			switch (index) {
				case 1:
					answer = ['请前往文档处查看“基本使用”，选择合适自己的方式引入。', '文档地址：https://thorui.cn/doc/。'];
					break;
				case 2:
					answer = ['所有开源组件均可免费商用。', '开源模板仅会员可商用，普通用户仅可学习参考，不可商用。'];
					break;
				case 3:
					answer = ['是的。终身会员制，一次付费，永久尊享升级，且付费模板可享受折扣。', '目前统一会员价：120元/永久。', '加会员可联系QQ3168647172或微信thorui_0615 。'];
					break;
				case 4:
					answer = [
						'QQ交流群1：745733024',
						'QQ交流群2：881906325',
						'QQ交流群3：605135318',
						'QQ交流群4：928308676',
						'QQ交流群5：532302279',
						'微信群：添加微信thorui_0615入群',
						'会员QQ群：付费后入群',
						'会员微信群：付费后入群'
					];
					break;
				default:
					break;
			}
			this.question = ['如何引入到自己项目中使用？', 'ThorUI可以商用吗？', '会员是永久的吗？', '有交流群吗？'][index - 1];
			this.answer = answer;
			this.show = true;
		}
	}
};
</script>

<style>
page {
	background-color: #fff;
}
.tui-img {
	width: 80rpx;
	height: 80rpx;
}

.tui-title {
	font-size: 30rpx;
	padding-left: 20rpx;
}

.tui-sub__text {
	font-size: 28rpx;
	color: #bfbfbf;
	padding-right: 30rpx;
}

.tui-question__box {
	width: 100%;
	background-color: #fff;
	flex-wrap: wrap;
	flex-direction: row;
	align-content: flex-start;
	font-size: 26rpx;
}

.tui-question__item {
	width: 49%;
	height: 200rpx;
	background-color: #f8f8f8;
	margin-bottom: 2%;
	border-radius: 20rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
}

.thorui-flex__between {
	position: relative;
}

.tui-common {
	width: 100%;
	padding: 30rpx;
	box-sizing: border-box;
}

.tui-answer__title {
	font-size: 30rpx;
}

.tui-answer__text {
	width: 100%;
	padding: 10rpx 30rpx;
	box-sizing: border-box;
	color: #555;
	font-size: 28rpx;
}
</style>
